<!--  -->
<script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js"></script>
<template>
  <div> 
    <van-pull-refresh v-model="pull_isLoading" @refresh="onRefresh">

      <van-tabs v-model="active" @change="onChangeTab" line-width="20" color="var(--themeBaseColor)" sticky background="#f5f5f5" :class="isShowTest ? 'title-tabs' : 'no-tabs'">
        <van-tab title="AI作品" v-if="isArrShow.includes(0)">
          <d-list endText="" :loading="tabArrOption ? tabArrOption[active].finished : false" :finished="tabArrOption ? tabArrOption[active].finished : false" @load="onLoad">
            <div style="margin-top: 0.5rem;column-count: 2; gap: 10px; padding: 4px 10px 10px 10px;">
              <div v-for="(item, index) in videoList" :key="index" class="grid-child-custom bg-fff border-radius-10 flex-column relative" v-if="!item.hidden">
                <template v-if="!item.hidden">
                  <div class="relative img-bg" style="min-height: 17rem;display: flex;align-items: center;">
                    <img v-if="item.cover_img" :src="item.cover_img" style="width: 100%;" />
                    <video v-else :src="item.url" :style="{ width: '100%', height: item.url ? '100%' : '17rem' }" class="w_h_100" />
                    <div v-if="item.lip" class="flex-column flex-a-c flex-j-c block-center" :class="item.lip ? 'createStatusBlock' : ''">
                      <div v-if="item.lip.status == 0" style="display: flex;flex-direction: column;align-items: center;">
                        <img :src="`${imgPath}ai-create/ai-create-14.gif`" mode="widthFix" style="width: 1.5rem;" />
                        <div>唇形匹配中</div>
                      </div>
                      <div v-if="item.lip.status == 2">
                        <i class="iconfont icon-tishi2"></i>
                        <div>创作失败</div>
                      </div>
                      <div v-if="item.lip.status == 1">
                        <i @click="onPreviewVideo(item.url)" class="iconfont icon-fabushipin f-40" style="text-shadow: #666666 0.025rem 0 0.25rem;"></i>
                      </div>
                    </div>

                    <div v-else class="flex-column flex-a-c flex-j-c block-center" :class="{ createStatusBlock: item.status == 0 || item.status == 2 }">
                      <template v-if="item.status == 0">
                        <img :src="`${imgPath}ai-create/ai-create-14.gif`" style="width: 35px;" />
                        <div>创作中</div>
                      </template>
                      <template v-if="item.status == 2">
                        <i class="iconfont icon-tishi2"></i>
                        <div>创作失败</div>
                      </template>
                      <template v-if="item.status == 1">
                        <i @click="onPreviewVideo(item.url)" class="iconfont icon-fabushipin f-40" style="text-shadow: #666666 1px 0 10px;"></i>
                      </template>
                    </div>
                    <div class="absolute yichunxingpipei t-c" v-if="item.is_lip_video">
                      <i class="iconfont icon-yichunxingpipei"></i>
                    </div>
                  </div>
                  <div class="f-grow-1"></div>
                  <div class="padding-10">
                    <div class="flex relative">
                      <div class="f-15 color-00001C f-grow-1 line-clamp-2 t-l" style="line-height: 1rem;">{{ item.name }}</div>
                      <i
                        v-if="item.has_operate && (!item.lip || (item.lip && item.lip.status != 0))"
                        @click="onClickVal('activePopover', index)"
                        class="iconfont icon-all_more padding-left-6 color-AAAAB3"
                      ></i>
                    </div>
                    <div class="flex-a-c margin-top-4" v-if="item.member">
                      <img :src="item.member ? item.member.avatar : ''" class="min-img" />
                      <div class="padding-left-6 f-12">{{ item.member ? item.member.nickname : "" }}</div>
                    </div>
                  </div>
                  <template v-if="active == tabArrOption[active].active && activePopover == index">
                    <div class="popover-group flex-column flex-a-c flex-j-c absolute t-l" @click="onClickVal('activePopover', null)">
                      <van-cell class="popover-group-cell" title="重命名" icon="edit" clickable @click="onClickResetName(item.id, index, 'video')" />
                      <van-cell class="popover-group-cell" title="唇形匹配" icon="iconfont icon-Icon_mouth" clickable v-if="item.has_lip_match" @click="onClickLip(item.duration, item.body, item.id)">
                        <template #icon>
                          <i class="iconfont icon-Icon_mouth f-12 margin-right-4" style="margin-right: 0.2rem;"></i>
                        </template>
                      </van-cell>
                      <van-cell class="popover-group-cell" title="播放原视频" icon="play-circle-o" clickable @click="onPreviewVideo(item.origin_video_url)" v-if="item.origin_video_url" />
                      <!-- <van-cell wx:if="{{item.origin_video_url}}" custom-class='popover-group-cell' title="播放原视频" icon="play-circle-o" clickable bind:click="onPreviewVideo" data-url="{{item.origin_video_url}}" /> -->
                      <van-cell class="popover-group-cell" title="保存视频" icon="down" clickable @click="beforeSaveVideo(item.id)" />
                      <van-cell class="popover-group-cell" title="发布视频" icon="video-o" clickable @click="toReleaseVideo(item)" />
                      <!-- <van-cell class='popover-group-cell' title="发布抖音" icon="music-o" clickable /> -->
                      <van-cell class="popover-group-cell" title="删除" icon="delete-o" clickable @click="onClickDelete(item.id, index, 'video')" />
                    </div>
                    <van-overlay class="absolute" :show="true" />
                  </template>
                </template>
              </div>
            </div>
          </d-list>

          <van-empty image="search" v-if="videoList.length == 0" description="暂无作品" />
        </van-tab>
        <van-tab title="数字分身" v-if="isArrShow.includes(1)">
          <d-list endText=""  :loading="tabArrOption ? tabArrOption[active].finished : false" :finished="tabArrOption ? tabArrOption[active].finished : false" @load="onLoad">
            <div style="margin-top: 0.5rem;column-count: 2; gap: 10px; padding: 4px 10px 10px 10px;">
              <div v-for="(item, index) in bodyList" :key="index" class="grid-child-custom bg-fff border-radius-10 relative">
                <template v-if="!item.hidden">
                  <div class="relative img-bg" style="min-height: 10rem;display: flex;align-items: center;">
                    <img v-if="item.cover_img" :src="item.cover_img" alt="" style="width: 100%;" />
                    <video v-else :src="item.url" :style="{ width: '100%', height: item.url ? '100%' : '10rem' }" class="w_h_100" />
                    <div class="flex-column flex-a-c flex-j-c block-center">
                      <i @click.stop="onPreviewVideo(item.url)" class="iconfont icon-fabushipin f-40" style="text-shadow: #666666 1px 0 10px;"></i>
                    </div>
                  </div>
                  <div class="padding-10 t-l">
                    <div class="flex relative">
                      <div class="f-15 color-00001C f-grow-1 line-clamp-2" style="line-height: 1rem;">{{ item.name }}</div>
                      <i @click.stop="onClickVal('activePopover', index)" class="iconfont icon-all_more padding-left-6 color-AAAAB3"></i>
                    </div>
                    <div class="flex-a-c margin-top-8" v-if="item.member">
                      <img :src="item.member.avatar" class="min-img" />
                      <div class="padding-left-6 f-12 color-AAAAB3">{{ item.member.nickname }}</div>
                    </div>
                  </div>

                  <template v-if="active == tabArrOption[active].active && activePopover == index">
                    <div class="popover-group flex-column flex-a-c flex-j-c absolute t-l" @click.stop="onClickVal('activePopover', null)">
                      <van-cell class="popover-group-cell" title="重命名" icon="edit" clickable @click="onClickResetName(item.id, index, 'body')" />
                      <van-cell v-if="body_edit_refer_img" class="popover-group-cell" title="编辑参考图" clickable @click="onEditorReferImg(item)">
                        <template #icon>
                          <i class="iconfont icon-xiugaitupian f-12 margin-right-4" style="margin-right: 0.2rem;"></i>
                        </template>
                      </van-cell>

                      <van-cell class="popover-group-cell" title="创作视频" icon="brush-o" @click.stop="toUrl('aiCreateVideoCreation', {}, { body_id: item.id, business_id: item.business_id || 0 })" />
                      <van-cell class="popover-group-cell" title="删除" icon="delete-o" clickable @click="onClickDelete(item.id, index, 'body')" />
                    </div>
                    <van-overlay class="absolute" :show="true" />
                  </template>
                </template>
              </div>
            </div>
          </d-list>

          <van-empty image="search" v-if="bodyList.length == 0" description="暂无分身" />
        </van-tab>
        <van-tab title="声音克隆" v-if="isArrShow.includes(2)">
          <div class="voice-clone-tab" >
            <div :class="audio_type === 0 ? 'clone-tabs active-clone-tabs' : 'clone-tabs'" @click.stop="clickAudioType(0)">
              <div>声音克隆</div>
              <!-- ({{ audio_sjt_count }}) -->
              <div  :class="audio_type === 0 ? 'tabs-gap active-tabs-gap' : 'tabs-gap'"></div>
            </div>
            <div :class="audio_type === 1 ? 'clone-tabs active-clone-tabs' : 'clone-tabs'" @click.stop="clickAudioType(1)">
              <div>声音克隆CV版</div>
              <!-- ({{ audio_cv_count }}) -->
              <div :class="audio_type === 1 ? 'tabs-gap active-tabs-gap' : 'tabs-gap'"></div>
            </div>
          </div>
          <d-list endText="" :loading="tabArrOption ? tabArrOption[active].finished : false" :finished="tabArrOption ? tabArrOption[active].finished : false" @load="onLoad">
            <div style="margin: 0.5rem 0.75rem 0 0.75rem;">
              <div v-for="(item, index) in audioList" :key="index" class="flex padding-10 bg-fff border-radius-10 relative" style="margin-bottom: 0.625rem; background: #ffffff;">
                <div class="border-radius-10 audio-block-bg flex-a-c flex-j-c relative">
                  <img :src="`${imgPath}ai-create/ai-create-04.png`" style="width: 60px;" />
                  <div class="flex-column flex-a-c flex-j-c block-center createStatusBlock" v-if="item.status == 0 || item.status == 2">
                    <template v-if="item.status == 0">
                      <div>创作中</div>
                    </template>
                    <template v-if="item.status == 2">
                      <i class="iconfont icon-tishi2"></i>
                      <div>创作失败</div>
                    </template>
                  </div>
                </div>
                <div class="f-grow-1 padding-left-6 flex-column">
                  <div class="f-15 color-00001C t-l" style="color: #00001C">{{ item.name }}</div>

                  <div class="sex-tag flex-a-c margin-top-8 f-11" style="color: #00001C;">
                    <div class="sex-icon">
                      <i class="iconfont icon-nan"></i>
                    </div>
                    {{ item.sex }}声
                  </div>
                  <div class="flex-a-c margin-top-8" v-if="item.member">
                    <img :src="item.member.avatar" class="min-img" />
                    <div class="padding-left-6 f-12 color-AAAAB3">{{ item.member.nickname }}</div>
                  </div>
                </div>

                <div class="relative" v-if="item.status == 1">
                  <i @click.stop="onClickVal('activePopover', index)" class="iconfont icon-all_more padding-left-6 color-AAAAB3"></i>
                </div>

                <template v-if="active == tabArrOption[active].active && activePopover == index">
                  <div class="popover-group flex-column flex-a-c flex-j-c absolute" @click.stop="onClickVal('activePopover', null)">
                    <van-cell class="popover-group-cell" title="重命名" icon="edit" clickable @click.stop="onClickResetName(item.id, index, 'audio')" />
                    <van-cell class="popover-group-cell" title="删除" icon="delete-o" clickable @click.stop="onClickDelete(item.id, index, 'audio')" />
                  </div>
                  <van-overlay class="absolute" :show="true" />
                </template>
              </div>
              <van-empty image="search" v-if="audioList.length == 0" description="暂无声音数据" />
            </div>
          </d-list>
        </van-tab>
        <van-tab title="唇形匹配" v-if="isArrShow.includes(3)">
          <d-list endText="" :loading="tabArrOption ? tabArrOption[active].finished : false" :finished="tabArrOption ? tabArrOption[active].finished : false" @load="onLoad">
            <div style="margin-top: 0.5rem;column-count: 2; gap: 10px; padding: 4px 10px 10px 10px;">
              <div v-for="(item, index) in libList" :key="index" class="grid-child-custom bg-fff border-radius-10 flex-column relative" v-if="!item.hidden">
                <template v-if="!item.hidden">
                  <div class="relative img-bg" style="min-height: 17rem;display: flex;align-items: center;">
                    <img v-if="item.cover_img" :src="item.cover_img" style="width: 100%;" />
                    <video v-else :src="item.url" :style="{ width: '100%', height: item.url ? '100%' : '17rem' }" class="w_h_100" />

                    <div v-if="item.lip" class="flex-column flex-a-c flex-j-c block-center" :class="item.lip ? 'createStatusBlock' : ''">
                      <div v-if="item.lip.status == 0" style="display: flex;flex-direction: column;align-items: center;">
                        <img :src="`${imgPath}ai-create/ai-create-14.gif`" mode="widthFix" style="width: 1.5rem;" />
                        <div>唇形匹配中</div>
                      </div>
                      <div v-if="item.lip.status == 2">
                        <i class="iconfont icon-tishi2"></i>
                        <div>唇形匹配失败</div>
                      </div>
                      <div v-if="item.lip.status == 1">
                        <i @click="onPreviewVideo(item.url)" class="iconfont icon-fabushipin f-40" style="text-shadow: #666666 0.025rem 0 0.25rem;"></i>
                      </div>
                    </div>
                    <div class="absolute yichunxingpipei t-c" v-if="item.is_lip_video">
                      <i class="iconfont icon-yichunxingpipei"></i>
                    </div>
                  </div>
                  <div class="f-grow-1"></div>
                  <div class="padding-10">
                    <div class="flex relative">
                      <div class="f-15 color-00001C f-grow-1 line-clamp-2 t-l" style="line-height: 1rem;">{{ item.name }}</div>
                      <i
                        v-if="item.has_operate && (!item.lip || (item.lip && item.lip.status != 0))"
                        @click="onClickVal('activePopover', index)"
                        class="iconfont icon-all_more padding-left-6 color-AAAAB3"
                      ></i>
                    </div>
                    <div class="flex-a-c margin-top-4" v-if="item.member">
                      <img :src="item.member ? item.member.avatar : ''" class="min-img" />
                      <div class="padding-left-6 f-12 color-AAAAB3">{{ item.member ? item.member.nickname : "" }}</div>
                    </div>
                  </div>

                  <template v-if="active == tabArrOption[active].active && activePopover == index">
                    <div class="popover-group flex-column flex-a-c flex-j-c absolute t-l" @click="onClickVal('activePopover', null)">
                      <van-cell class="popover-group-cell" title="重命名" icon="edit" clickable @click="onClickResetName(item.id, index, 'lib')" />
                      <van-cell class="popover-group-cell" title="唇形匹配" icon="iconfont icon-Icon_mouth" clickable v-if="item.has_lip_match" @click="onClickLip(item.duration, item.body, item.id)">
                        <template #icon>
                          <i class="iconfont icon-Icon_mouth f-12 margin-right-4" style="margin-right: 0.2rem;"></i>
                        </template>
                      </van-cell>
                      <van-cell class="popover-group-cell" title="播放原视频" icon="play-circle-o" clickable @click="onPreviewVideo(item.origin_video_url)" v-if="item.origin_video_url" />
                      <!-- <van-cell wx:if="{{item.origin_video_url}}" custom-class='popover-group-cell' title="播放原视频" icon="play-circle-o" clickable bind:click="onPreviewVideo" data-url="{{item.origin_video_url}}" /> -->
                      <van-cell class="popover-group-cell" title="保存视频" icon="down" clickable @click="beforeSaveVideo(item.id)" />
                      <van-cell class="popover-group-cell" title="发布视频" icon="video-o" clickable @click="toReleaseVideo(item)" />
                      <!-- <van-cell class='popover-group-cell' title="发布抖音" icon="music-o" clickable /> -->
                      <van-cell class="popover-group-cell" title="删除" icon="delete-o" clickable @click="onClickDelete(item.id, index, 'lip')" />
                    </div>
                    <van-overlay class="absolute" :show="true" />
                  </template>
                </template>
              </div>
            </div>
          </d-list>

          <van-empty image="search" v-if="libList.length == 0" description="暂无作品" />
        </van-tab>
      </van-tabs>

      <van-dialog use-slot title="提示" v-model="showDialog" confirm-button-color="var(--themeBaseColor)" show-cancel-button @confirm="onconfirmLip" confirm-button-text="确认匹配">
        <div class="margin-12" style="text-align: left; padding: 1rem;">
          <div>
            本次生成将消耗{{ lip_duration_unused_item }}秒唇形匹配创作权益， 剩余{{ lip_duration_unused }}秒。
            <div class="themeColor">注：如需更改正脸参考图，请先在数字分身列表进行修改，再进行唇形匹配</div>
          </div>
        </div>
      </van-dialog>
      <van-dialog
        use-slot
        title="提示"
        v-model="showDialogUnReferImg"
        confirm-button-text="去上传"
        cancel-button-text="不上传且匹配"
        @cancel="submitLip"
        @confirm="onClickVal('showDigital', true)"
        confirm-button-color="var(--themeBaseColor)"
      >
        <div class="margin-12" style="text-align: left; padding: 1rem;">
          <div>
            <span class="themeColor">数字分身未上传正脸参考图！</span>若不上传人脸参考图，默认将选择视频中第一个有人脸的画面中，人脸占比最大的人物为目标，导致唇形匹配有误差，请确认是否去上传！。
            <div class="themeColor">本次生成将消耗{{ lip_duration_unused_item }}秒唇形匹配创作权益， 剩余{{ lip_duration_unused }}秒</div>
          </div>
        </div>
      </van-dialog>
      <van-popup v-model="showDigital" class="pop-base-class" position="bottom" round style="background-color: #F5F5F5;" closeable @close="onClickVal('showDigital', false)">
        <div class="pop-base-title">请编辑-正脸参考图</div>
        <div class="pop-base-content" style="padding: 0;text-align: left;">
          <van-cell-group inset>
            <van-cell title="分身名称" :value="lip_duration_unused_body ? lip_duration_unused_body.name : ''" />
            <van-cell title="数字分身" use-label-slot :border="false">
              <div slot="label">
                <div style="display: block;">
                  <video :src="lip_duration_unused_body ? lip_duration_unused_body.url : ''" style="height: 2rem; width: 2rem;" />
                </div>
              </div>
            </van-cell>
            <van-cell title="正脸参考图" :border="false" use-label-slot>
              <div slot="label">
                <div style="display: block;">
                  <van-uploader
                    v-model="bodyReferImg"
                    accept="image/jpeg, image/jpg, image/png, image/bmp, image/webp"
                    use-before-read
                    max-count="1"
                    :before-read="beforeReadReferImg"
                    :after-read="uploadImageReferImg"
                    :delete="onDelete"
                  ></van-uploader>
                </div>
                <div>
                  图片要求：
                </div>
                <div>文件大小：小于等于10MB</div>
                <div>图像大小：长宽比小于等于 2，最大边长小于等 4096</div>
                <div>格式：jpeg、jpg、png、bmp、webp</div>
              </div>
            </van-cell>
          </van-cell-group>
        </div>
        <div class="pop-base-bottom">
          <van-button :disabled="!bodyReferImg || !bodyReferImg.length" @click="submitUploadReferImg" round color="var(--themeBaseColor)" type="danger" block>确认并提交</van-button>
        </div>
      </van-popup>

      <van-popup v-model="showResetName" class="pop-base-class" position="bottom" round style="background-color: #F5F5F5;" closeable>
        <div class="pop-base-title">{{ ResetNameInfo.text }}重命名</div>
        <div class="pop-base-content">
          <van-cell-group inset>
            <van-field v-model="resetNewName" placeholder="请输入新的名称" :border="false" />
          </van-cell-group>
        </div>
        <div class="pop-base-bottom">
          <van-button @click.stop="submitResetName" round color="var(--themeBaseColor)" type="danger" block style="height: 40px;">确认修改</van-button>
        </div>
      </van-popup>
      <van-popup v-model="previewMedia" position="center" round style="background-color: #000;width: 100%;" @close="oncloseMedia">
        <video :src="previewMediaUrl" controls style="width: 100%;"></video>
      </van-popup>
    </van-pull-refresh>
  </div>
</template>

<script>
import DList from "@/components/dlist";
export default {
  data() {
    return {
      imgPath: "",
      business_id: 0,
      activePopover: null,
      showPullRefresh: true,

      showoverlay: true,
      resetNewName: null,
      active: 0,
      list: [],
      showResetName: false,

      videoList: [],
      bodyList: [],
      audioList: [],
      libList: [],
      ResetNameInfo: {},
      previewMedia: false,
      previewMediaUrl: "",
      showDialogUnReferImg: false,
      showDialog: false,
      showDigital: false,
      bodyReferImg: [],
      pull_isLoading: false,
      audio_type: 0,
      audio_cv_count: 0,
      audio_sjt_count: 0,
      loading: false
    };
  },

  activated() {
    this.business_id = this.$route.query.business_id || 0;
    this.active = this.$route.params.tab || 0;
    this.previewMedia = false;
    this.imgPath = this.$store.state.imgPath;
    this.init();
    // this.getAudioCount();
  },

  components: { DList },
  props: {
    isArrShow : {
      // AI作品 - 0 ; 数字分身 - 1 ; 声音克隆 - 2 ; 唇形匹配 - 3
      type : null,
      default: () => {
        return []
      }
    },
    isShowTest: {
      type: Boolean,
      default: false
    },
    name: {
      type: String,
      default: ""
    },
    business_id: {
      type: String || Number,
      default: 0
    },
    lip_duration_unused: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    name() {
      this.init();
    },
  },
  computed: {},

  methods: {
    onRefresh() {
      this.pull_isLoading = true;
      this[this.tabArrOption[this.active]["listName"]] = [];
      this.init();
    },
    onLoad() {
      this.getTabsList();
    },
    async getData() {
      let { result, msg, data } = await $http.get(
        "plugin.ai-create.frontend.controllers.center.manage",
        {
          business_id: this.business_id || 0
        },
        "."
      );
      if (result == 0) return this.$toast(msg);
      Object.assign(this, data);
    },

    init() {
      let tabArrOption = [
        {
          name: "作品",
          url: "plugin.ai-create.frontend.controllers.video.index",
          page: 1,
          finished: false,
          listName: "videoList",
          isShowId: 0
        },
        {
          name: "数字分身",
          url: "plugin.ai-create.frontend.controllers.body.index",
          page: 1,
          finished: false,
          listName: "bodyList",
          isShowId: 1
        },
        {
          name: "声音克隆",
          url: "plugin.ai-create.frontend.controllers.audio.index",
          page: 1,
          finished: false,
          listName: "audioList",
          isShowId: 2
        },
        {
          name: "唇形匹配",
          url: "plugin.ai-create.frontend.controllers.video.lip-video",
          page: 1,
          finished: false,
          listName: "libList",
          isShowId: 3
        }
      ];
      this.tabArrOption = tabArrOption.filter(obj1 => 
        this.isArrShow.some(obj2 => obj2 === obj1.isShowId)
      );
      for(let [index,item] of this.tabArrOption.entries()) {
        item.active = index;
      }

      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
      this.videoList = [];
      this.bodyList = [];
      this.audioList = [];
      this.libList = [];
      this.loading = false;
      this.getTabsList({ refresh: true });
    },
    onClickVal(name, val) {
      this[name] = val;
    },
    async getTabsList({ refresh = false } = {}) {
      if(this.loading) {
        return
      }
      this.loading = true;
      let index = this.active;
      let activeTabInfo = this.tabArrOption[index];
      // if(refresh) this.data[activeTabInfo.listName] = []; //重置列表对应的data数据
      if (activeTabInfo.finished) return; //没有更多
      let { result, msg, data } = await $http.post(
        activeTabInfo.url,
        {
          business_id: this.business_id || 0,
          page: activeTabInfo.page,
          audio_type: this.audio_type,
          search: {
            name: this.name
          }
        },
        "."
      );
      if (result == 0) return this.$toast(msg);
      // 添加轮询请求数据
      if (!this.timer) {
        this.timer = setInterval(() => {
          let newArrStatus = this[this.tabArrOption[this.active]["listName"]].filter(item => (item.lip && item.lip.status == 0) || item.status == 0);
          this.getStatus(newArrStatus);
        }, 10000);
      }
      this.loading = false;
      this.pull_isLoading = false;
      this.total = data.data.total;

      let _list = this[activeTabInfo.listName] || [];
      this[activeTabInfo.listName] = _list.concat(data.data);

      if (data.current_page == data.last_page) {
        return (this.tabArrOption[index].finished = true);
      }
      this.tabArrOption[index].page += 1;
    },
    // 查询视频状态
    async getStatus(newArrStatus) {
      let { result, msg, data } = await $http.get("plugin.ai-create.frontend.controllers.video.index.get-status", {
        ids: newArrStatus.map(item => item.id)
      });
      if (result == 0) return this.$toast(msg);
      const newArrVideoList = this.replaceObjectsById(data, this[this.tabArrOption[this.active]["listName"]]);
      this.$set(this, this.tabArrOption[this.active]["listName"], newArrVideoList);
      this.$forceUpdate();
    },
    replaceObjectsById(sourceArray, targetArray) {
      // 遍历源数组中的每个对象
      sourceArray.forEach(sourceObj => {
        // 在目标数组中查找具有相同 id 的对象的索引
        const index = targetArray.findIndex(targetObj => targetObj.id === sourceObj.id);
        // 如果找到匹配的 id
        if (index !== -1) {
          // 用源数组中的对象替换目标数组中对应的对象
          targetArray[index] = sourceObj;
        }
      });
      return targetArray;
    },
    onChangeTab(active) {
      // this.active = active;
      this.activePopover = null;
      let activeTabInfo = this.tabArrOption[this.active];
      let _data = this[activeTabInfo.listName] || [];
      this.loading = false;
      if (!_data.length) this.getTabsList();
    },
    onClickResetName(id, index, listtype) {
      let _apiObjArr = {
        video: {
          api: "plugin.ai-create.frontend.controllers.video.index.rename",
          list: "videoList",
          text: "作品",
          isShowId: 0
        },
        body: {
          api: "plugin.ai-create.frontend.controllers.body.index.rename",
          list: "bodyList",
          text: "数字分身",
          isShowId: 1
        },
        audio: {
          api: "plugin.ai-create.frontend.controllers.audio.index.rename",
          list: "audioList",
          text: "声音",
          isShowId: 2
        },
        lib: {
          api: "plugin.ai-create.frontend.controllers.video.lip-video.rename",
          list: "libList",
          text: "唇形匹配",
          isShowId: 3
        }
      };
      let _apiObj = {}
      for(let item in _apiObjArr) {
        for(let citem of this.isArrShow) {
          if(_apiObjArr[item].isShowId === citem) {
            _apiObj[item] = _apiObjArr[item]
          }
        }
      }
      let _ResetNameInfo = _apiObj[listtype];
      _ResetNameInfo.id = id;
      _ResetNameInfo.index = index;
      this.activePopover = null;
      this.ResetNameInfo = _ResetNameInfo;
      this.showResetName = true;
    },
    async submitResetName() {
      if (!this.resetNewName) {
        app.tips("请填写新的名称");
        return;
      }
      let { result, msg, data } = await $http.get(this.ResetNameInfo.api, {
        business_id: this.business_id || 0,
        name: this.resetNewName,
        id: this.ResetNameInfo.id
      });
      if (result == 0) return this.$toast(msg);
      console.log(this.ResetNameInfo, "listlist");
      (this[this.ResetNameInfo.list][this.ResetNameInfo.index].name = this.resetNewName), (this.showResetName = false);
      this.resetNewName = null;
    },
    toUrl(name, params = {}, query = {}) {
      if (!name) return;
      this.$router.push(this.fun.getUrl(name, params, query));
    },
    onClickDelete(id, index, listtype) {
      let _apiObjArr = {
        video: {
          api: "plugin.ai-create.frontend.controllers.video.index.delete",
          list: "videoList",
          text: "作品",
          isShowId: 0
        },
        body: {
          api: "plugin.ai-create.frontend.controllers.body.index.delete",
          list: "bodyList",
          text: "分身",
          isShowId: 1
        },
        audio: {
          api: "plugin.ai-create.frontend.controllers.audio.index.delete",
          list: "audioList",
          text: "声音",
          isShowId: 2
        },
        lip: {
          api: "plugin.ai-create.frontend.controllers.video.lip-video.delete",
          list: "libList",
          text: "唇形匹配",
          isShowId: 3
        }
      };

      let _apiObj = {}
      for(let item in _apiObjArr) {
        for(let citem of this.isArrShow) {
          if(_apiObjArr[item].isShowId === citem) {
            _apiObj[item] = _apiObjArr[item]
          }
        }
      }
      this.delInfo = _apiObj[listtype];
      this.delInfo.id = id;
      this.delInfo.index = index;
      this.activePopover = null;
      this.$dialog
        .confirm({
          title: "提示",
          message: "确定删除该" + this.delInfo.text
        })
        .then(() => {
          this.submitDelList();
        });
    },
    async submitDelList() {
      let { result, msg, data } = await $http.get(
        this.delInfo.api,
        {
          business_id: this.business_id || 0,
          id: this.delInfo.id
        },
        "."
      );
      if (result == 0) return this.$toast(msg);
      this.$set(this[this.delInfo.list][this.delInfo.index], "hidden", true);
    },
    onPreviewVideo(url) {
      this.previewMediaUrl = url;
      this.previewMedia = true;
    },
    oncloseMedia() {
      this.previewMedia = false;
      this.previewMediaUrl = "";
    },
    toReleaseVideo(item) {
      sessionStorage.setItem(
        "shareVideoPath",
        JSON.stringify({
          videoUrl: item.url
        })
      );
      this.$router.push(this.fun.getUrl("releaseVideo"));
    },
    beforeSaveVideo(id) {
      this.download(id);
    },
    // 嘴唇
    onconfirmLip() {
      if (!this.lip_duration_unused_body.refer_img) {
        // 分身的正脸参考图为空
        this.showDialogUnReferImg = true;
        return;
      }
      this.submitLip();
    },
    async submitLip() {
      let _form = {
        video_id: this.lip_duration_unused_video_id
      };
      let { result, msg, data } = await $http.post(
        "plugin.ai-create.frontend.controllers.create.video.lip-match",
        {
          business_id: this.business_id || 0,
          form: _form
        },
        "."
      );
      this.$dialog
        .alert({
          title: "提示",
          message: "提交匹配" + msg
        })
        .then(() => {
          // on close
        });
      this.init();
      this.lip_duration_unused_video_id = null;
      this.showDialogUnReferImg = false;
    },
    // 前置校验方法
    async beforeReadReferImg(event) {
      return new Promise((resolve, reject) => {
        if (event.size > 10 * 1024 * 1024) {
          this.$toast("文件不能超过10MB");
          reject();
        } else {
          resolve();
        }
      });
    },
    // 上传文件
    uploadImageReferImg(file) {
      console.log(file, "filefile");

      const img = new Image();
      img.src = file.content;
      img.onload = () => {
        const ratio = Math.max(img.width / img.height, img.height / img.width);
        if (ratio > 2) {
          this.$toast("图片长宽比不能超过2:1");
          this.bodyReferImg = [];
          return false;
        }

        if (img.width > 4096 || img.height > 4096) {
          this.$toast("图片最大边长不能超过4096px");
          this.bodyReferImg = [];
          return false;
        }

        let uploadLoading = this.$toast.loading({
          message: "上传中",
          duration: 0
        });

        let fd = new FormData();
        fd.append("file", file.file);

        axios
          .post(this.fun.getRealUrl("upload.uploadPic"), fd, {
            headers: { "Content-Type": "multipart/form-data" }
          })
          .then(({ data }) => {
            console.log(data, "datadata", data.result);
            if (data.result == 1) {
              this.refer_img = data.data.img_url;
            } else {
              this.bodyReferImg = [];
            }
            uploadLoading.clear();
          })
          .catch(() => {
            this.$toast("上传失败");
            uploadLoading.clear();
          });

        console.log(ratio, "ratioratioratio");
      };
    },
    // 删除文件
    onDelete() {
      this.bodyReferImg = [];
    },
    async submitUploadReferImg() {
      if (!this.bodyReferImg.length) {
        this.$toast("请先上传正脸参考图");
        return;
      }
      let { result, msg, data } = await $http.post(
        "plugin.ai-create.frontend.controllers.create.body-clone.upload-refer-img",
        {
          business_id: this.business_id || 0,
          refer_img: this.refer_img,
          id: this.lip_duration_unused_body.id
        },
        "."
      );
      this.$toast("编辑正脸参考图" + msg);
      if (!result) return;
      this["lip_duration_unused_body.refer_img"] = this.refer_img;
      this.showDigital = false;
      this.showDialog = this.lip_duration_unused_video_id ? true : false;
    },
    onClickLip(duration, body, vid) {
      if (!this.lip_duration_unused) {
        this.$dialog
          .confirm({
            title: "提示",
            message: "您的唇形匹配权益不足，无法进行匹配，请先进行充值！",
            confirmButtonText: "去充值"
          })
          .then(() => {
            this.$router.push(this.fun.getUrl("searchAll", "", { plugin_id: 198 }));
          })
          .catch(() => {
            // on cancel
          });
        return;
      }
      this.lip_duration_unused_item = duration;
      this.lip_duration_unused_body = body;
      this.lip_duration_unused_video_id = vid;
      this.showDialog = true;
    },
    onEditorReferImg(body) {
      this.bodyReferImg = body.refer_img
        ? [
            {
              url: body.refer_img
            }
          ]
        : [];
      this.refer_img = body.refer_img;
      this.lip_duration_unused_body = body;
      this.bodyReferImg = this.bodyReferImg;
      this.showDigital = true;
    },
    clickAudioType(audio_type) {
      if(audio_type == -1) {
        return
      }
      this.audio_type = audio_type;
      this.init();
    },
    async getAudioCount() {
      let { result, msg, data } = await $http.post(
        "plugin.ai-create.frontend.controllers.audio.index.get-audio-count",
        {
          business_id: this.business_id || 0
        },
        "."
      );
      if (!result) return;
      this.audio_cv_count = data.audio_cv_count;
      this.audio_sjt_count = data.audio_sjt_count;
    },
    async download(id) {
      let uploadUrl = this.fun.getRealUrl("plugin.ai-create.frontend.controllers.video.index.download", {
        business_id: this.business_id || 0,
        id
      });
      console.log(uploadUrl,'11111uploadUrluploadUrl',window.location.host + uploadUrl);
      let eleLink = document.createElement("a");
      eleLink.href = uploadUrl;
      eleLink.click();
      eleLink.remove();
    }
  },
  deactivated() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.pop-base-title {
  margin: 18px 12px 12px !important;
  font-size: 1rem !important;
  font-weight: bold !important;
  text-align: left !important;
}
.pop-base-class .pop-base-content {
  min-height: 39vh;
  max-height: 60vh;
  overflow: scroll;
  padding: 0 0.75rem 3.75rem;
}
.pop-base-class .pop-base-bottom {
  padding: 0.625rem 0.875rem;
  background: #ffffff;
}
.color-00001C {
  color: white;
}
.color-AAAAB3 {
  color: #aaaab3 !important;
}

.bg-fff {
  background-color: #ffffff;
}
.f-13 {
  margin-bottom: 0.3rem;
}
.border-radius-10 {
  border-radius: 0.625rem;
  overflow: hidden;
  margin-bottom: 0.6rem;
}

.m-t-10 {
  margin-top: 0.625rem !important;
}

.padding-10 {
  padding: 0.625rem;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 0;
  width: 100%;
}

.padding-12 {
  padding: 0.75rem;
}

.padding-top-12 {
  padding-top: 0.75rem;
}

.padding-bottom-12 {
  padding-bottom: 0.75rem;
}

.padding-left-6 {
  padding-left: 0.375rem;
  color: white;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.img-bg {
  background: #000;
}
.headTop {
  padding: 1.5rem 0.75rem 4.6875rem;
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--themeBaseColor)), to(#f5f5f5));
  background-image: -webkit-linear-gradient(var(--themeBaseColor), #f5f5f5);
  background-image: linear-gradient(var(--themeBaseColor), #f5f5f5);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.headTop .himg {
  width: 3.4375rem;
  height: 3.4375rem;
  border-radius: 100%;
  border: 2px solid #ffffff;
  margin: 0 auto;
}

.headTop .himg img {
  width: 100%;
  height: 100%;
  border-radius: 100%;
}

.col-box {
  height: 4rem;
  box-shadow: inset 0px 2 5px 1px rgba(255, 255, 255, 0.3);
  border-radius: 1rem;
  color: #fff;
  flex: 1 1 calc(50% - 0.8rem);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.col-box:last-child {
  margin: 0;
}

.col-bg-1 {
  background: linear-gradient(180deg, #005bdc 0%, #6ba8ff 100%);
}

.col-bg-2 {
  background: linear-gradient(180deg, #007adf 0%, #65b9ff 100%);
}

.col-bg-3 {
  background: linear-gradient(180deg, #2752ff 0%, #7791f8 100%);
}

.grid-child-custom {
  overflow: hidden;
}
.relative {
  position: relative;
}
.absolute {
  position: absolute !important;
}
.block-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 56px;
  color: #ffffff;
}
.createStatusBlock {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px 10px 10px 10px;
}
img {
  display: block;
  margin: 0;
}

.min-img {
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid #d6d6dc;
  border-radius: 0.625rem;
}

.sex-tag {
  width: 56px;
  height: 20px;
  background: #e5eefe;
  border: 1px solid #e5eefe;
  border-radius: 10px 10px 10px 10px;
}
.sex-icon {
  width: 23px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  background: #ffffff;
  border-radius: 9px 9px 9px 9px;
  margin-right: 4px;
}

.sex-icon .iconfont {
  width: 15px;
  height: 15px;
  background: #015ef5;
  color: #ffffff;
  border-radius: 9px 9px 9px 9px;
}
.popover-group-cell {
  width: 7.5rem !important;
  padding: 4px 16px !important;
  border-radius: 16px !important;
  margin-bottom: 10px;
}
.popover-group {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  flex-wrap: wrap;
}
.icon-image {
  width: 50px;
}
.audio-block-bg {
  width: 80px;
  height: 80px;
  background: linear-gradient(57deg, #e3edff 0%, #eae6ff 61%, #e3f4ff 100%);
  border-radius: 12px 12px 12px 12px;
}
.margin-12 {
  padding: 0.8rem;
  line-height: 2;
}
.yichunxingpipei {
  right: 0;
  top: 0;
  width: 2rem;
  line-height: 1.5rem;
  height: 1.5rem;
  background: linear-gradient(330deg, #f98d20 0%, #ff112a 55%, #ff178b 100%);
  border-radius: 0px 0.4rem 0px 0.4rem;
  color: #fff;
}

.voice-clone-tab {
  margin: 0.9rem 0.75rem 0.6rem;
  display: flex;
}
.clone-tabs {
  font-size: 0.9375rem;
  color: #6E6E79;
  // background: #ffffff;
  // border-radius: 0.5rem;
  padding: 0.36rem 0.7rem;
  margin-right: 1rem;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.active-clone-tabs {
  color: #00001C;
}
.tabs-gap{
  width: 1.5rem;
  height: 0.2rem;
  background: #015EF5;
  border-radius: 0.875rem 0.875rem 0.875rem 0.875rem;
  margin-top: 0.4rem;
  opacity: 0;
}
.active-tabs-gap {
  opacity: 1 !important;
}
::v-deep  .title-tabs .van-sticky {
  // opacity: 0 !important;
  display: none;
  height: 0 !important;;
}
::v-deep .no-tabs .van-tabs__line {
  bottom: 20px !important;
}
</style>
